import logo from "@img/bookshelf-logo.svg"
import MenuIcon from "@mui/icons-material/Menu"
import {
    Divider,
    Drawer,
    IconButton,
    List,
    ListItem,
    ListItemButton,
    ListItemIcon,
    ListItemText,
    ThemeProvider,
} from "@mui/material"
import { useState } from "react"
import { primarySidebarButton } from "@widgets/side-bar/const/primary-sidebar-buttons"
import { secondarySidebarButton } from "@widgets/side-bar/const/secondary-sidebar-buttons"
import { sideBarTheme } from "./side-bar.theme"

export const SideBar = () => {
    const [open, setOpen] = useState(false)

    const toggleDrawer = (newOpen: boolean) => () => {
        setOpen(newOpen)
    }

    return (
        <ThemeProvider theme={sideBarTheme}>
            <IconButton onClick={toggleDrawer(true)}>
                <MenuIcon />
            </IconButton>
            <Drawer open={open} onClose={toggleDrawer(false)}>
                <img
                    width={72}
                    height={72}
                    src={logo}
                    style={{ marginInline: "auto" }}
                    alt={"bookshelf-logo"}
                />
                <Divider style={{ marginTop: "1em" }} />
                <List>
                    {primarySidebarButton.map((button) => (
                        <ListItem>
                            <ListItemButton>
                                <ListItemIcon>{button.icon}</ListItemIcon>
                                <ListItemText primary={button.text} />
                            </ListItemButton>
                        </ListItem>
                    ))}
                </List>
                <Divider style={{ marginTop: "auto" }} />
                <List>
                    {secondarySidebarButton.map((button) => (
                        <ListItem>
                            <ListItemButton>
                                <ListItemIcon>{button.icon}</ListItemIcon>
                                <ListItemText primary={button.text} />
                            </ListItemButton>
                        </ListItem>
                    ))}
                </List>
            </Drawer>
        </ThemeProvider>
    )
}
